<template>
  <basic-container>
    <avue-crud :option="option"
               :data="data"
               ref="crud"
               v-model="form"
               :table-loading="loading"
               :permission="permissionList"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               :page="page"
               @refresh-change="refreshChange"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">
      <template slot-scope="{row,type,size}"
                           slot="menu">
      <el-button :type="type"
                 :size="size"
                 icon="el-icon-thumb"
                 @click="setTemplate(row)" v-has="'/mall-cloud-base/storeGrade/setStoreGradeTemplate'">设置可选模板</el-button>
    </template>
    </avue-crud>
    <el-dialog title="设置可选模板"
               :visible.sync="box"
               width="810px"
                >
      <storeTemplate is-edit=true :usedTemplate="usedTemplate"  ref="my_storeTemplate" ></storeTemplate>
      <span slot="footer">
        <el-button type="primary"
                   size="small"
                   @click="handleSetTemplate" v-has="'/mall-cloud-base/storeGrade/setStoreGradeTemplate'">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
    import {
        getList,
        remove,
        update,
        add,
        setStoreGradeTemplate
    } from "@/api/base/store/storeGrade";
    import { mapGetters } from "vuex";
    import storeTemplate from './storeTemplate';
    import {
        testSpaceSize,
		isInteger,
		testPirce,
		isIntegerFixTwo,
		isInteger0,
        testLength,
            validateFormat
    } from '@/util/util'

    export default {
        components: {
            storeTemplate
        },
        data () {
            return {
                usedTemplate:[],//已经选中的店铺模板
                // firstOpen:1,//是否是首次打开设置可选模板
                storeGradeId:"",
                form: {},
                query: {},
                loading: true,
                rolesTree: [],
                rolesKeys: [],
                box: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                option: {
                    excelBtn: false,
                    tip: false,
                    border: true,
                    index: true,
                    selection: false,
                    viewBtn: true,
                    editBtn:true,
                    rowKey: 'id',
                    height: 'auto',
                    // calcHeight: 380,
                    dialogType: 'dialog',
                    size: 'mini',
					align:'center',
                    column: [
                        {
                            label: "等级名称",
                            prop: "gradeName",
							width:80,
                            labelWidth: 140,
                            rules: [{
                                required: true,
                                message: "请输入等级名称",
                                trigger: "blur"
                            },
                              {
                                validator: testLength,
                                trigger: "blur"
                              },{
                              validator:validateFormat,
                                trigger:'blur'
                              }]
                        },
                        {
                            label: "限制发布商品数",
                            prop: "goodsCount",
							width:110,
                            precision:0,
                            minRows: 1,
                            labelWidth: 140,
                            rules: [{
                                required: true,
                                message: "请输入限制发布商品数量",
                                trigger: "blur"
                            },{
								validator: isInteger0,
							  }]
                        },
                        {
                            label: "等级级别",
                            hide: true,
                            precision:0,
                            minRows: 1,
                            labelWidth: 140,
                            prop: "gradeLevel",
                            rules: [{
                                required: true,
                                message: "请输入等级级别",
                                trigger: "blur"
                            },{
								validator: isInteger0,
							  }]
                        },
                        {
                            label: "购买价格",
                            prop: "price",
                            precision:2,
							width:80,
                             minRows: 0,
                            labelWidth: 140,
                            rules: [{
                                required: true,
                               message: "请输入购买价格",
                                trigger: "change"
                            },{
								validator: testPirce,
							  }]
                        },
                        {
                            label: "等级序号",
                            prop: "sequence",
                            precision:0,
                            minRows: 1,
							width:80,
                            labelWidth: 140,
                            rules: [{
                                required: true,
                                 message: "请输入等级序号",
                                trigger: "blur"
                            },{
								validator: isInteger,
							  }]
                        },
                        {
                            label: "图片空间限制",
                            prop: "imgSpaceSize",
                            labelWidth: 140,
                            type: "input",
							width:100,
                            minRows: 0,
                            maxRows: 999999999,
                            rules: [{
                                required: true,
                                message: "请输入图片空间限制(保留两位小数)",
                                trigger: "blur"
                            },
                                {
                                    validator: isIntegerFixTwo,
                                    trigger: 'blur'
                                }
                            ]
                        },
                      {
                        label: "视频空间限制",
                        prop: "videoSpaceSize",
                        labelWidth: 140,
                        type: "input",
						width:100,
                        minRows: 0,
                        maxRows: 999999999,
                        rules: [{
                          required: true,
                          message: "请输入视频空间限制(保留两位小数)",
                          trigger: "blur"
                        },
                          {
                            validator: isIntegerFixTwo,
                            trigger: 'blur'
                          }
                        ]
                      },
                        {
                            label: "等级对应模板",
                            prop: "templates",
                            labelWidth: 140,
                            editDisplay: false,
                            addDisplay: false,
                            rules: [{
                                required: true,
                                message: "请输入等级对应模板",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "允许子账户数",
                            prop: "acountNum",
                            precision:0,
							width:100,
                            minRows: 1,
                            labelWidth: 140,
                            rules: [{
                                required: true,
                                message: "请输入子账户数量",
                                trigger: "blur"
                            },{
								validator: isInteger0,
							  }]
                        },
                      {
                        label: "等级描述",
                        prop: "content",
						type:'textarea',
						minRows:2,
                        labelWidth: 140,
                        rules: [{
                          required: true,
                          message: "请输入等级描述",
                          trigger: "blur"
                        },{
                          validator:validateFormat,
                          trigger:'blur'
                        }]
                      }
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList () {
                return {
                    addBtn: this.vaildData(this.permission["/mall-cloud-base/storeGrade/addItem"], true),
                    viewBtn: this.vaildData(this.permission["/mall-cloud-base/storeGrade/detail"], false),
                    delBtn: this.vaildData(this.permission["/mall-cloud-base/storeGrade/delete"], false),
                    editBtn: this.vaildData(this.permission["/mall-cloud-base/storeGrade/editItem"], false)
                };
            },
        },
        methods: {
            //打开设置模板的界面
            setTemplate(row){
              console.log(row)
                if(row.templates!=null && row.templates !=""){
                    this.usedTemplate=row.templates.split(",");
                }else{
                  this.usedTemplate = [];
                }
              this.storeGradeId=row.id;
                this.box=true;
            },
            //发送更新店铺模版
            handleSetTemplate(){
                const alreadyCheck=this.$refs.my_storeTemplate.alreadyCheck;
                setStoreGradeTemplate(this.storeGradeId,alreadyCheck).then(() => {
                    this.box=false
                    this.usedTemplate=alreadyCheck;
                    this.$message({
                        type: "success",
                        message: "操作成功！",
                    });
                    this.refreshChange();
                })
            },
            rowSave (row, loading, done) {
                row.position = row.positionIds;
                row.deptName = row.$deptId;
                row.repassword = row.password;
                add(row).then(() => {
                    loading();
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                }, error => {
                    done();
                    ;
                });
            },
            rowUpdate (row, index, loading, done) {
              row.position = row.positionIds;
                update(row).then(() => {
                  loading();
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                }, error => {
                    done();
                    ;
                });
            },
            rowDel (row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(res => {
                        if(res.data.success){
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                            if(this.data.length==1){
                                this.page.currentPage-=1
                            }
                            this.onLoad(this.page);
                        }
                        else{
                            this.$message.error('该等级已跟相关店铺关联，不能删除');
                        }

                    });
            },
            searchReset () {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange (params,done) {
                this.query = params;
                this.onLoad(this.page, params,done);
            },
            currentChange (currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange (pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange () {
                this.onLoad(this.page);
            },
            onLoad (page, params = {},done) {
                this.loading = true;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if(done){
                      done();
                    }
                    this.loading = false;
                    const data = res.data;
                    console.log(data)
                    this.page.total = data.count;
                    this.data = data.data;
                    console.log(data);
                });
            }
        }
    };
</script>

<style>
</style>
